// packageA/pages/stepChartAll/stepChartAll.js
const app = getApp();
import CommonService from '../../../utils/service/commonService.js';
import Toast from '../../../miniprogram_npm/@vant/weapp/toast/toast';
import * as echarts from '../../../ec-canvas/echarts';
const util = require('../../../utils/util');
//图表对象
let Chart=null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //日历范围，默认最近7天
    dateRange: [util.countPrevDay(new Date(),6),new Date().getTime()],
    //显示日历
    showDate: false,
    //最小值为一个月前
    minDate: util.countPrevDay(new Date(),31),
    //最大值为今天
    maxDate: new Date().getTime(),
    //开始日期
    startTime: util.timeFormatDay(util.countPrevDay(new Date(),6)),
    //结束日期
    endTime: util.timeFormatDay(new Date()),
    //图表
    ec: {
      //延迟加载
      lazyLoad: true
    },
    //是否显示图表（避免遮挡）
    showChart:true,
    //无数据
    showNoData:true,
    //图表配置
    chartSet:{
      //颜色
      barColor:'#666',
      //轴上标题
      ytitle:'活跃度',
      xtitle: '姓名',
    },
    //所有数据
    list: [],
    //显示分页按钮
    showNext: false,
    //第几页
    page: 0,
    //分页按钮显示文字
    nextPageWord: '下一页',
    //登录用户
    user: null,
    //项目选择框
    showProject:false,
    //项目选择数据
    projectList:[],
    //项目id
    projectId:null,
    //项目名称
    projectName:'请选择部门'  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //当前登录用户
    this.setData({ 
      user: app.globalData.userInfo 
    })  
    //获取步数数据
    this.getData();
  },

  //获取步数数据
  getData(){
    Toast.loading({
      duration: 0,
      forbidClick: true,
      message: '加载中...'
    });

    //图表组件
    this.echartsComponnet = this.selectComponent('#mychart');

    this.setData({
      showNoData: false,
      showChart: true
    })

    let param={
      beginDate: this.data.startTime,
      endDate: this.data.endTime
    }

    CommonService.stepStatistics(param).then(res=>{
      if(res.data.data && res.data.data.result && res.data.data.result.length){
        let result=res.data.data.result;
        console.log('步数');
        console.log(result);

        this.setData({
          list: result         
        })

        //分页显示图表
        this.chartDatePage();

        Toast.clear();
      }else{
        this.setData({
          showNoData: true,
          showChart: false
        })
        Toast.clear();
      }  
    }).catch((error) => {
      this.setData({
        showNoData: true,
        showChart: false
      })
      Toast.clear();
    })
  },

  //点击下一页
  onNext(){
    this.setData({
      page: this.data.page + 1,
      nextPageWord: '下一页'
    })
    //分页显示图表
    this.chartDatePage();
  },

  //分页显示图表
  chartDatePage(){
    let list=this.data.list;
    let result=[];
    let page=this.data.page;
    //每次显示几条
    let size=20;

    //多于一页的分页显示
    if(list.length>size){
      this.setData({
        showNext: true
      })
      
      //取相应的数据
      result=list.slice(size*page,size*page+size);
      
      //不足一页时返回首页
      if(result.length<size){
        this.setData({
          page: -1,
          nextPageWord: '返回第一页'
        })
      }
    }else{
      result=list;
    }

    //图表数据
    let xData=[];
    let yData=[];
    
    for(let i=0;i<result.length;i++){
      xData.push(result[i].nickName);
      //数据设成对象格式，点击时可获取用到的字段
      yData.push({
        imei: result[i].imei,
        value: result[i].step
      });
    }
    
    //图表格式
    let chartData={
      xData:xData,
      yData:[{
          type: 'bar',
          data: yData,
          barWidth : '15px',
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'right',
                color: "#80242d"
              },
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 0,
                [{
                  offset: 0,
                  color: '#0385DC'
                },{
                  offset: 1,
                  color: '#1f4e79'
                }]
              )
            }
          }
      }]
    }

    // console.log('图表数据');
    // console.log(chartData);  

    //判断图表是否第一次绘制
    this.isHaveChart(Chart,this.echartsComponnet,this.data.chartSet,chartData);
  },

  //显示日历
  onShowDate() {
    this.setData({ 
      showDate: true 
    })
    this.hideChart();
  },

  //隐藏日历
  onCloseDate() {
    this.setData({ 
      showDate: false 
    })
    this.showChart();
  },

  //确认日期
  onConfirmDate(event) {
    const [start,end] = event.detail;
    this.setData({
      showDate: false,
      startTime: util.timeFormatDay(start),
      endTime: util.timeFormatDay(end)
    })

    this.getData();
  },

  //判断图表是否第一次绘制
  isHaveChart(chartObj,componnetObj,setObj,dataObj){
    if (!chartObj){
      //如果是第一次绘制，则初始化图表
      this.init_echarts(chartObj,componnetObj,setObj,dataObj);
    }else{
      //更新图表数据
      this.setOption(chartObj,setObj,dataObj);
    }
  },

  //初始化图表
  init_echarts: function (chartObj,componnetObj,setObj,dataObj) {
    componnetObj.init((canvas, width, height) => {
      chartObj = echarts.init(canvas, null, {
        width: width,
        height: height
      });

      this.setOption(chartObj,setObj,dataObj);

      return chartObj;
    });
  },

  //更新图表数据
  setOption: function (chartObj,setObj,dataObj) {
    //清除
    chartObj.clear();
    //设置新数据
    chartObj.setOption(this.getOption(chartObj,setObj,dataObj));
  },

  //指定图表的配置项和数据
  getOption: function (chartObj,setObj,dataObj) {
    //文字颜色
    let fontColor='#666';

    let option = {
      legend: {
        textStyle: {
          color: '#666',
          padding: [0, 30, 0, 0]
        },
        x: 'right',
        y: 'top'
      },
      grid: {
        left: '5%',
        right: '18%',
        top: '10%',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        name: setObj.ytitle,
        axisLabel: {
          color: fontColor,
          fontSize: 14,
          interval: 0,
          rotate: '-30'
        },
        axisLine: {
          lineStyle: {
            color: setObj.barColor
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee'
          }
        }
      },
      yAxis: {
        type: 'category',
        name: setObj.xtitle,
        axisLabel: {
          color: fontColor,
          fontSize: 13,
          interval: 0
        },
        axisLine: {
          lineStyle: {
            color: setObj.barColor
          }
        },
        axisTick:{
          //轴线与数据字段对齐
	        alignWithLabel: true
	      },
        data: dataObj.xData
      },
      series:dataObj.yData
    };

    let _this=this;

    //首先移除事件，不然会造成多次点击
    chartObj.off('click');
    
    //点击柱状图
    chartObj.on('click', function (params) {
      let objs={
        beginDate: _this.data.startTime,
        endDate: _this.data.endTime,
        imei: params.data.imei,
        nickName: params.name
      }

      //跳转人员图表
      wx.navigateTo({
        url: "/packageA/pages/stepChartPerson/stepChartPerson?paramObj="+JSON.stringify(objs)
      })
    })

    return option;
  },

  //隐藏图表
  hideChart(){
    this.setData({
      showChart:false
		})
  },

  //显示图表
  showChart(){
    this.setData({
      showChart:true
		})
  },

  //显示项目
  onShowProject(){
    this.setData({
			showProject: true
    })
    this.getProjectList();
  },

  //查询项目
  getProjectList(){
    this.setData({
      projectList: []
    })

    let param = {
      isAuth: true,
      className: 'depart',
      data: {
        searchAll: true,
        selectFields: ['id','name']
      }
    }

    //模糊查询
    if(this.data.valueSearchProject){
      param.data.name='%' + this.data.valueSearchProject + '%';
    }

    CommonService.goFindList(param).then(res=>{
      if(res.data.data && res.data.data.result && res.data.data.result.length){
        let result=res.data.data.result;
        let arr=[];

        result.forEach(item => {
          arr.push({
            text:item.name,
            id:item.id
          });
        });

        this.setData({
          projectList: arr
        })
      }
    }).catch((error) => {
    })
  },

  //隐藏项目
  onCloseProject(){
    this.setData({
      showProject: false,
      valueSearchProject:''
    })
  },

  //确认项目
  onConfirmProject(e){
    this.setData({
      projectId:e.detail.value.id,
      projectName:e.detail.value.text
    })
    this.onCloseProject();
  },

  //搜索项目
  onChangeProjectVal(e){
    this.setData({
      valueSearchProject: e.detail
    })
    this.getProjectList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})